<script setup lang="ts">
import type {TableTree} from "@/interfaces/components/Table";
import type {DistConfig} from "@/interfaces/views/sys/dist";
import CdlTable from "@/components/table";
import type {Mode, FormData, Query, Request, State} from "@/interfaces/components/Page";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {ElPagination, ElConfigProvider, ElButton, ElTag} from "element-plus";
import zhCN from "element-plus/dist/locale/zh-cn.mjs"
import {createPopup} from "@/utils/createPopup";
import {reactive, h} from "vue";
import CdlForm from "@/components/form";
import type {FormTree} from "@/interfaces/components/Form";
import {useFormTemplate} from "@/hooks/formHooks";
import {appStore} from "@/store/modules/app";

const props = defineProps({
  dictTypeId:{
    type: String,
    required: true
  }
})

const app = appStore()

const request:Request = {
  createdIsNeed: true,
  url: "/sys/dict/data"
}

const state = reactive<State<Query<DistConfig>, DistConfig>>({
  queryForm: {
    dictTypeId: props.dictTypeId
  },
  dataList: []
})

const {query, batchDel, added, update, loading, handleSizeChange, handleCurrentChange} = useTablePagingTemplate(request, state)

const tableTree: TableTree<DistConfig> = {
  colRule: [
    {ti: "字典值", prop: "dictValue"},
    {ti: "字典标签", prop: "dictValue", dict: ["dictTypeId"], minWidth: 100},
    {ti: "排序", prop: "sort", sort: true},
    {ti: "创建时间", prop: "createTime",  minWidth: 160},
  ],
  control:[
    {name: "修改", type: "success", method: openDictUpdate},
    {name: "删除", type: "danger", prop: "id", method: batchDel},
  ]
}

const formTree: FormTree<DistConfig> = [
    [
      {label: "字典值", component: "input", prop: "dictValue", rule: [{
          required: true, message: '字典值不能为空', trigger: 'blur'
        }]},
      {label: "字典标签", component: "input", prop: "dictLabel", rule: [{
          required: true, message: '字典标签不能为空', trigger: 'change'
        }]},
    ],
    [
      {label: "标签样式", component: "select", prop: "labelClass", options: [
          { label: "默认", value: "primary"},
          { value: 'success', label: 'success' },
          { value: 'info', label: 'info' },
          { value: 'warning', label: 'warning' },
          { value: 'danger', label: 'danger' }
        ], inSlot: (item)=> {
          return h(ElTag, {
            type: item.value === "primary"? "" : item.value,
            style: "width: 100%"
          }, { default: () => item.label })
        }},
      {label: "排序", component: "inputNumber", prop: "sort"},
    ],
    [{label: "备注", component: "input", prop: "remark"}]
  ]

const popupData: FormData<DistConfig> = {
  id: "",
  dictValue: "",
  dictLabel: "",
  labelClass: "primary",
  sort: 0,
  remark: ""
}

/**
 * 打开字典修改配置
 * @param data
 */
function openDictUpdate(data: DistConfig){
  createPopup("修改", h(CdlForm, {
    templateTree: formTree,
    model: createPopupDataTemplate(data),
  }), "update", popupCallBack)
}

/**
 * 弹出层回调
 * @param data 数据
 * @param mode 模式
 */
function popupCallBack(mode: Mode, data?: any){
  data.dictTypeId = props.dictTypeId
  if(mode === "add"){
    delete data.id
    added(data, ()=>{
      app.getDictListAction()
    })
  }else {
    update(data, ()=>{
      app.getDictListAction()
    })
  }
}

/**
 * 打开字典新增
 */
function openDictAdd(){
  createPopup("新增", h(CdlForm, {
    templateTree: formTree,
    model: popupData,
  }), "add", popupCallBack)
}

const {createPopupDataTemplate} = useFormTemplate(popupData)
</script>

<template>
  <div style="margin-bottom: 20px">
    <ElButton type="primary" @click="openDictAdd">新增</ElButton>
  </div>
  <CdlTable :template-tree="tableTree" :data="state.dataList" :loading="loading"
            :controlWidth="180" controlFixed></CdlTable>
  <el-config-provider :locale="zhCN">
    <el-pagination
        :current-page="state.page as number"
        :page-sizes="state.pageSizes!"
        :page-size="state.limit as number"
        :total="state.total as number"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-config-provider>
</template>

<style scoped lang="scss">

</style>
